<!--承包费情况明细-->
<template>
  <div class="public-common">
    <div class="public-title">承包费情况明细</div>
    <el-form :model="form" label-width="120px">
      <el-row>
        <el-col :span="6">
          <el-form-item label="年份">
            <el-date-picker style="width: 100%;" format="yyyy/MM/dd" value-format="yyyy/MM/dd" v-model="form.yue" type="date"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="名称">
            <el-input v-model="form.ming" placeholder="请输入搜索关键词进行快速搜索"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-button type="primary" icon="el-icon-search" style="margin-left:10px;">搜索</el-button>
          <el-button type="primary" icon="el-icon-receiving">打印</el-button>
          <strong style="color: #409EFF;">已缴费车辆：0辆 未缴费车辆：121950 辆 延迟缴费车辆：0 辆</strong>
        </el-col>
      </el-row>
    </el-form>
    <el-table :data="tabledata" size="mini" border stripe header-row-class-name="textcenter">
      <el-table-column label="车队" fixed="left" prop="a1">
      </el-table-column>
      <el-table-column label="车牌号" prop="a2">
      </el-table-column>
      <el-table-column label="1月" prop="a3">
      </el-table-column>
      <el-table-column label="2月" prop="a4">
      </el-table-column>
      <el-table-column label="3月" prop="a5">
      </el-table-column>
      <el-table-column label="4月" prop="a6">
      </el-table-column>
      <el-table-column label="5月" prop="a7">
      </el-table-column>
      <el-table-column label="6月" prop="a8">
      </el-table-column>
      <el-table-column label="7月" prop="a9">
      </el-table-column>
      <el-table-column label="8月" prop="a10">
      </el-table-column>
      <el-table-column label="9月" prop="a11">
      </el-table-column>
      <el-table-column label="10月" prop="a12">
      </el-table-column>
      <el-table-column label="11月" prop="a13">
      </el-table-column>
      <el-table-column label="12月" prop="a14">
      </el-table-column>
    </el-table>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        tabledata: [
          {
            a1: '奔驰',
            a2: '陕A68594',
            a3: '￥85000',
            a4: '￥85000',
            a5: '￥95000',
            a6: '￥85000',
            a7: '￥500 ',
            a8: '￥85000',
            a9: '￥85000',
            a10: '￥85000',
            a11: '￥85000',
            a12: '￥85000 ',
            a13: '￥85000',
            a14: '￥85000',
          },
          {
            a1: '奥迪',
            a2: '陕A12333',
            a3: '￥85000',
            a4: '￥85000',
            a5: '￥95000',
            a6: '￥85000',
            a7: '￥500 ',
            a8: '￥85000',
            a9: '￥85000',
            a10: '￥85000',
            a11: '￥85000',
            a12: '￥85000 ',
            a13: '￥85000',
            a14: '￥85000',
          },
          {
            a1: '宝马',
            a2: '陕A61231',
            a3: '￥85000',
            a4: '￥85000',
            a5: '￥95000',
            a6: '￥85000',
            a7: '￥500 ',
            a8: '￥85000',
            a9: '￥85000',
            a10: '￥85000',
            a11: '￥85000',
            a12: '￥85000 ',
            a13: '￥85000',
            a14: '￥85000',
          },
        ],
        page: {
          now: 1,
          pagesize: 10,
          sizes: [2, 10, 20, 50, 100],
          total: 0,
          key: ''
        },
        form: {
          yue: '',
          ming: ''
        },
      }
    },
    methods: {
      //分页
      handleSizeChange(pagesize) {
        this.page.pagesize = pagesize;
        this.search(true, true);
      },
      handleCurrentChange(pageno) {
        this.page.now = pageno;
        this.search(true, true);
      }

    }
  }
</script>

<style>
  .el-form-item .el-form-item__label {
    width: 80px !important;
  }

  .el-form-item .el-form-item__content {
    margin-left: 80px !important;
  }

  .public-common .el-form-item .el-input {
    width: 100%;
  }

  .public-title,
  .fuwukab {
    line-height: 30px;
    background-color: #deecfd;
    padding: 0 10px;
    margin-bottom: 20px;
    color: #15428F
  }

  .el-scrollbar__wrap {
    margin: 0 !important;
  }

  .border-table {
    width: 100%;
    display: table;
    border-top: 1px solid #ddd;
    border-right: 1px solid #ddd;
    border-collapse: collapse !important;
    border-spacing: 0px !important;
  }

  .border-table th,
  .border-table td {
    padding: 10px 0;
    border-left: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    padding-left: 2px;
    /* padding-bottom: 2px !important; */
    text-align: center;
    vertical-align: middle;
    min-width: 40px;
  }
</style>
